<template>
	<view class="savepadding">
		<view style="position: relative;">
			<view class="tab-select" :style="{ opacity: afterHeaderOpacity, }">
				<view class="tab-select-item" :class="{'tab-select-active':tabIndex === tabSelect}"
					v-for="(tabItem, tabIndex) in dataDetail.introduceList" :key="tabIndex" @click="tabClick(tabIndex)">
					{{tabItem.introduceName}}
				</view>
			</view>
			<u-swiper :list="dataDetail.carModelUrlList" height="240" radius="0" @change="e => current = e.current"
				autoplay>
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in dataDetail.carModelUrlList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>

			</u-swiper>

			<view class="color-wrap">

				<view class="color-list" v-if="colorList.length>0">
					<view v-for="(colorItem, colorindex) in colorList" :key="colorindex" class="color-bg"
						:style="{'background-color':colorItem.color}"
						:class="{'color-active':selectColorIndex === colorindex}"
						@click="selectColorIndex = colorindex">
					</view>
				</view>
				<text class="color-text" v-if="dataDetail.carModelColor">颜色:{{dataDetail.carModelColor}}</text>

			</view>

			<image v-if="dataDetail.videoUrl"
				style="width: 80upx;height: 80upx;position: absolute;left: 60upx;bottom: 37upx;" :src="videoPlayImg"
				mode="scaleToFill" @click="playvideo"></image>
		</view>
		<view class='text-box'>
			<view class="item base-info">
				<view class="base-info-top">
			
					<view class="base-info-top-model">
						<text
							class="base-info-top-model-brand">{{filterNull(dataDetail.brandName)+" "+filterNull(dataDetail.seriesName)+" "+filterNull(dataDetail.modelName)}}</text>
					</view>
				</view>
			
				<view class="base-info-tags" v-if="dataDetail.tagNames && dataDetail.tagNames.length>0">
					<text v-for="(item, index) in strSplit(dataDetail.tagNames)" :key="item">
						{{item}}
					</text>
				</view>
				<view class='base-price'>
					<!-- <text class="base-info-price" v-if="bizType==6">市场指导价：¥{{filterNull(dataDetail.guidePrice)}}万/起</text>
					<text class="base-info-price"
						v-else-if="dataDetail.schemeType==1">市场指导价：¥{{filterNull(dataDetail.guidePrice)}}万/起</text> -->
					<view  class='text-box1'>
						<text class="base-info-price">
							{{dataDetail.schemeType==2?"首付款":"保证金"}}：¥{{filterNull(dataDetail.busAmount)}}起
						</text>
						<text class="base-info-price"
							style="margin-left: 30upx;">月租金：¥{{filterNull(dataDetail.monthlyRent)}}起</text>
					</view>
				</view>
				<view class='base-price1' v-if='dataDetail.dmsCarPrice'>
					<text class="base-info-price">起购价：¥{{filterNull(dataDetail.dmsCarPrice)}}起</text>					
				</view>
			</view>
			<view class="item base-info" style="border-radius: 16upx;" v-if="dataDetail.carModelRemark">
				<text style="font-size: 28upx;
						color: $black33;
						font-weight: bold;">
					费用说明</text>
			
				<text style="font-size: 22upx;color: #999999;margin-top: 20upx;">说明：{{dataDetail.carModelRemark}}</text>
			</view>
			
			<view style="width:100%;height: 16px;background-color:#F8F8F8 ;"></view>
			<view class="item base-info">
				<view class='item-title'>
					<view v-for="(item,index) in titleList" :key='index' class='title-text' :class="selectTitle==item.text?'title-text-selset':''" @click=titleClick(item)>
						<view>{{item.text}}</view>
						<view v-show="selectTitle==item.text" class='line'></view>
					</view>
				</view>
				<view class='parameter' id='car'>
					<view class='parameter-info' v-for="(item, index) in parameterList" :key="index">
						<text class="label">{{item.paramName}}:</text>
						<text class="label">{{filterNull(item.paramValue)}}</text>
					</view>
				</view>
				<view id='info' style='min-height: 1upx;'>
					<view  v-for="(tItem, tIndex) in dataDetail.introduceList" :key="tIndex" :id="tItem.sort" style="padding:16px 0;font-size: 14px;">
						<rich-text :nodes="tItem.introduceValue"></rich-text>
					</view>
				</view>				
			</view>		
		</view>
		<view style="height:130upx"></view>
		<!-- 试驾 -->
		<!-- #ifdef H5 -->
		<view style="background:#fff">
		    <view class="bottom_btns savepadding">
		       <view class="button" @click="goBuyCar">去购车</view>
				<view></view>
		        <view class="button" @click="goAddOrder">去租车</view>
		    </view>
		</view>		
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view style="background:#fff" v-if="bizType !== '6'">
		    <view class="bottom_btns savepadding">
				<!-- <view style='width: 80upx;'>
					<view class='sear'>
						<button style="position: absolute;width: 140upx;height: 96upx;opacity: 0;" open-type='share'></button>
						<image class="bg" src="../../../static/icon_share@2x.png" ></image>
						<text class="bottom-share">分享</text>
					</view>
				</view> -->
				<button class='share-btn'  @click='showShareFuction'>分享</button>
		        <view class="button" @click="goAddOrder">{{bizType == 6?'立即试驾':1 == dataDetail.schemeType?'申请购车':'去租车'}}</view>
				<view></view>
		    </view>
		</view>
		<view style="background:#fff"  v-else>
			<view class="bottom_btns savepadding">
				<view class="button"  style="width:100%;background: #173b42;color: #fff;" @click="testDrive">立即试驾</view>	
			</view>
			
		</view>
		<!-- #endif -->
		<u-popup :safeAreaInsetBottom="true" mode="center" :show="showVideo" overlay :customStyle="{width:'100%'}"
			closeOnClickOverlay @close="close">
			<video id="myVideo" :src="dataDetail.videoUrl" controls style="width: 100%;"></video>
		</u-popup>
		<!-- 登录弹窗 -->
		<LoginMask></LoginMask>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" mode="bottom" round="10" :customStyle="{background: 'rgba(0, 0, 0, 0.1)'}" style="position: relative;"  >
			<view class='info-box'>
				<!-- <view style='height:600upx;background-color:#F8F8F8 ;padding:32upx;border-radius: 8upx;'>
					<view class='img-box'>
						<image :src="carUrl" mode="aspectFill"></image>
					</view>
					<view style='margin:24upx 0;font-size:28upx'>
						{{filterNull(dataDetail.brandName)+" "+filterNull(dataDetail.seriesName)+" "+filterNull(dataDetail.modelName)}}
					</view>
					<view>
						<view class="base-info-tags" v-if="dataDetail.tagNames && dataDetail.tagNames.length>0">
							<text v-for="(item, index) in strSplit(dataDetail.tagNames)" :key="item">
								{{item}}
							</text>
						</view>
						<view class='base-price'>
							<text class="base-info-price" v-if="bizType==6">市场指导价：¥{{filterNull(dataDetail.guidePrice)}}万/起</text>
							<text class="base-info-price"
								v-else-if="dataDetail.schemeType==1">市场指导价：¥{{filterNull(dataDetail.guidePrice)}}万/起</text>
							<view v-else class='text-box1'>
								<text class="base-info-price">
									{{dataDetail.schemeType==2?"整备费":dataDetail.schemeType==4?"首付":"保证金"}}：¥{{filterNull(dataDetail.busAmount)}}起
								</text>
								<text class="base-info-price"
									style="margin-left: 30upx;">月租金：¥{{filterNull(dataDetail.monthlyRent)}}起</text>
							</view>
						</view>
						<view class='base-price1' v-if='dataDetail.dmsCarPrice'>
							<text class="base-info-price">起购价：¥{{filterNull(dataDetail.dmsCarPrice)}}起</text>
							
						</view>
					</view>
					<view class='share-line'></view>
					<view class='share-text'>
						<view class='text-icon'><u-icon name="weixin-fill" size='24'></u-icon></view>
						<view class='text-value'>微信扫一扫进入小程序查看详情分享自卡文租赁商城</view>
						<view class='text-img'><image :src="carUrl" mode="aspectFill"></image></view>
					</view>				
				</view>	 -->
				 <canvas :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" canvas-id="myCanvas" id="myCanvas"
				        ></canvas>
			</view>
			<view style="background: #ffffff;width:100%">
				<view class='shar-click'>
					<!-- <button open-type='share' plain="true">分享朋友圈</button> -->
					<button open-type='share' plain="true">分享好友</button>
					<button  plain="true" @click="saveToAlbum()">下载图片</button>
				</view>
				<view class="bottom2" :class="isIos?'bottom3':''" @click='showShare=false'>取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import isEmpty from 'lodash/isEmpty';
	import LoginMask from '@/components/layout/login-mask.vue';
	import {
		schemeinfo,
		schemeparamlist
	} from '../../../common/api.js';
	import moment from '@/util/moment.js'
	import * as relaNameApi from '@/common/apis/relaName-api';
	export default {
		components: {
			LoginMask,
		},
		data() {
			return {
				colorList: [],
				current: 0,
				selectColorIndex: 0,
				tabSelect: 0,
				schemeId: '',
				showVideo: false,
				videoContext: null,
				videoPlayImg: this.baseImageUrl + "uni_rental/playvideo.png",
				bizType: 0, //1.热门租车 2.以租代购 3.长租 4.金融分期 5.直购 6.试驾 7.选车
				dataDetail: {},
				afterHeaderOpacity: 0, //不透明度
				modelCode:'', // 车型
				titleList:[{text:'车辆参数',id:'car'},{text:'详情介绍',id:'info'}],
				selectTitle:'车辆参数',
				parameterList:[],
				subSchemeId:'', // 子方案id
				subSchemeRentId:'', // 卡文子方案id
				cavanFlag:'',// 是否是卡文方案
				showShare:false, // 是否展示分享弹框
				isIos:false,
				carUrl:'',
				
				imagePath: '',      // 生成的图片临时路径
				ctx:null,
				canvasWidth: 300,
				canvasHeight: 400,
			}
		},
		computed: {
			openid() {
				return this.$store.state.user.openid;
			},
			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
			},
		},
		onReady() {
			// this.calcAnchor();//计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
		},
		onShow() {
			const type = uni.getStorageSync('modelType')
			if(type=='iphone'){
				this.isIos = true
			}else{
				this.isIos = false
			}
		},
		onPageScroll(e) {
			//锚点切换
			let allLength = this.dataDetail.introduceList.length;
			for (let index in this.dataDetail.introduceList) {
				let rindex = allLength - index - 1;

				let anchor = this.dataDetail.introduceList[rindex];

				if (e.scrollTop >= anchor.top) {
					this.tabSelect = rindex;
					return
				}
			}
			//导航栏渐变
			let tmpY = 375;
			e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (2 / tmpY);
		},

		methods: {
			testDrive(){
				console.log(1111111111111)
				uni.navigateTo({
					url: '../../../pagesB/mine/testdrivelist/testDrive'+"?schemeId=" + this.dataDetail.schemeId 
				})
			},
			showShareFuction(){
				this.showShare = true
				this.generateImage()
			},
			 // 绘制图片和文字
			async generateImage() {
				console.log(1111111111)
			  this.ctx = uni.createCanvasContext('myCanvas', this);
			  
			  // 1. 绘制背景
			  this.ctx.fillStyle = '#ffffff';
			  this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
				console.log(this.ctx,1111111111)
			  // 2. 绘制网络图片（需先下载）
			  try {
				// const imagePath = await this.downloadImage(this.carUrl);
				// this.ctx.drawImage(imagePath, 0, 0, 300, 200);
				const imageInfo = await new Promise((resolve, reject) => {
				  uni.getImageInfo({
					src: this.carUrl,
					success: resolve,
					fail: reject
				  });
				});
				this.ctx.drawImage(imageInfo.path, 0, 0, 300, 200);
			  } catch (err) {
				console.error('图片加载失败:', err);
				return;
			  }
		
			  // 3. 绘制文字
			  this.ctx.setFontSize(14);
			  this.ctx.setFillStyle('#333333');
			  this.ctx.fillText('品牌:'+this.dataDetail.brandName, 10,220, 140);
			  this.ctx.fillText('车系:'+this.dataDetail.seriesName, 160,220, 140);
			  this.ctx.fillText('车型:'+this.dataDetail.modelName, 10,240, 220);
			  this.ctx.fillText('月租金:'+'¥'+this.dataDetail.monthlyRent+'起/台',10, 270, 220);
			  // 开始一条新路径
			  this.ctx.setLineDash([5, 10]); // 第一个数字是线段长度，第二个数字是间距
			  this.ctx.lineWidth = 1; // 设置线条宽度
			  this.ctx.strokeStyle = '#cfcfcf'; // 设置线条颜色
			  this.ctx.beginPath();
			  this.ctx.moveTo(10, 290); // 起始点
			  this.ctx.lineTo(290, 290); // 终点
			  this.ctx.stroke(); // 绘制虚线
			  this.ctx.setFillStyle('#333333');
			  
			  // 直接使用相对路径（H5和小程序通用）
			  this.ctx.drawImage('/static/weCahrt.png', 10,310,20,20);
			  this.ctx.fillText('微信扫一扫进入小程序查看详情',35, 320, 200);
			  this.ctx.fillText('分享来自卡文租赁商城',35, 340, 200);
			  
			  try {
				// const imagePath = await this.downloadImage(this.carUrl);
				// this.ctx.drawImage(imagePath, 240, 310, 50, 50);
				const imageInfo = await new Promise((resolve, reject) => {
				  uni.getImageInfo({
					src: this.carUrl,
					success: resolve,
					fail: reject
				  });
				});
				this.ctx.drawImage(imageInfo.path, 240, 310, 50, 50);
			  } catch (err) {
				console.error('图片加载失败:', err);
				return;
			  }
			  // 4. 绘制完成后生成临时图片
			  this.ctx.draw(false, () => {
				uni.canvasToTempFilePath({
				  canvasId: 'myCanvas',
				  success: (res) => {
					this.imagePath = res.tempFilePath; // 保存临时路径
					uni.previewImage({ urls: [this.imagePath] }); // 预览图片
				  },
				  fail: (err) => console.error('生成图片失败:', err)
				});
			  });
			},
			 // 下载网络图片到本地临时路径
			    downloadImage(url) {
			      return new Promise((resolve, reject) => {
			        uni.downloadFile({
			          url: url,
			          success: (res) => resolve(res.tempFilePath),
			          fail: (err) => reject(err)
			        });
			      });
			    },
			
			// 保存图片到相册
			saveToAlbum() {
			      if (!this.imagePath) {
			        uni.showToast({ title: '请先生成图片', icon: 'none' });
			        return;
			      }
			
			      uni.saveImageToPhotosAlbum({
			        filePath: this.imagePath,
			        success: () => uni.showToast({ title: '保存成功' }),
			        fail: (err) => {
			          if (err.errMsg.includes('auth deny')) {
			            // 处理权限被拒绝的情况
			            uni.showModal({
			              title: '权限申请',
			              content: '需要相册权限才能保存图片',
			              success: (res) => {
			                if (res.confirm) uni.openSetting(); // 引导用户打开设置
			              }
			            });
			          } else {
			            uni.showToast({ title: '保存失败', icon: 'none' });
			          }
			        }
			      });
			    
			  },
			getParameterData() {
				schemeparamlist({
					params: {
						carModelId: this.dataDetail.modelId
					}
				}).then(res => {
					res.map((item)=>{
						item.data.map((info)=>{
							this.parameterList.push(info)
						})
					})
					
				})
			},
			// 锚点跳转
			titleClick(item){
				this.selectTitle = item.text
				 const query = uni.createSelectorQuery().in(this);
				  query.select('#' + item.id).boundingClientRect(data => {
					uni.pageScrollTo({
					  scrollTop: data.top,
					  duration: 300
					});
				  }).exec();
			},
			// 跳转到3方
			goBuyCar(){
				let url = `https://dms-uat.cavanauto.com/basic-api/system/sso/app/configurator?target=order&App-Token=${uni.getStorageSync('accessToken')}&tenId=xxx&modelCode=${this.modelCode}&cityCode=${uni.getStorageSync('cityCode')}`
				window.flutter_inappwebview.callHandler("CavanWebInteractive", {
					  action:"ToCarBuying",
					  data:{
						url:url
					  }
				  });
			},
			getData() {
				schemeinfo({
					params: {
						subSchemeId:this.cavanFlag==2?this.subSchemeId:'',
						subSchemeRentId:this.cavanFlag==1?this.subSchemeRentId:'',
						cityCode:uni.getStorageSync('cityCode'),	
					}
				}).then(res => {
					this.dataDetail = res;
					this.modelCode = res?.modelCode
					this.carUrl = res?.carModelUrlList[0]
					res.carModelParams?.map((item)=>{
						item.data.map((info)=>{
							this.parameterList.push(info)
						})
					})
					if (!uni.$u.test.isEmpty(this.dataDetail.videoUrl)) {
						this.dataDetail.videoUrl = this.baseImageUrl + this.dataDetail.videoUrl;
					}
					this.dataDetail.introduceList = this.dataDetail.introduceList.map(item => {
						item.sort = 'a' + item.sort;
						return item;
					})
					setTimeout(() => {
						this.calcAnchor(); //计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
					}, 1000)

				})
			},

			//跳转锚点
			tabClick(index) {
				this.afterHeaderOpacity = 1;
				uni.pageScrollTo({
					scrollTop: this.dataDetail.introduceList[index].top,
					duration: 0
				});
				setTimeout(() => {
					this.tabSelect = index;
				}, 50)
			},
			//计算锚点高度
			calcAnchor() {

				for (let index in this.dataDetail.introduceList) {

					let anchor = this.dataDetail.introduceList[index];

					let commentsView = uni.createSelectorQuery().select("#" + anchor.sort);

					commentsView.boundingClientRect((data) => {
						let statusbarHeight = 0;
						//APP内还要计算状态栏高度
						// #ifdef APP-PLUS
						statusbarHeight = plus.navigator.getStatusbarHeight()
						// #endif
						let headerHeight = uni.upx2px(100);

						let topHeight = statusbarHeight + headerHeight;
						// anchor.top = Math.ceil(data.top - topHeight);
						anchor.top = data.top - topHeight;

					}).exec();
				}

			},

			strSplit(str) {
				if (str !== '' && str != undefined) {
					return str.split(',')
				} else {
					return []
				}
			},

			async goAddOrderHandle(path) {
				// 拼接跳转地址
				const url = path +
					"?brandName=" + this.dataDetail.brandName + // 品牌名称
					"&seriesName=" + this.dataDetail.seriesName + // 车系名称
					"&modelName=" + this.dataDetail.modelName + // 车型名称
					"&modelId=" + this.dataDetail.modelId + // 车型id
					"&schemeId=" + this.dataDetail.schemeId + // 方案id
					"&schemeType=" + this.dataDetail.schemeType + // 方案类型(1.直购，2分期购车，3租赁 4.金融分期)
					"&schemeTypeStr=" + this.dataDetail.schemeTypeStr+ // 方案类型名称
					"&imgUrl=" + this.dataDetail.carModelUrlList[0] // 方案类型名称
				if (6 == this.bizType) {
					//试驾
					uni.navigateTo({
						url
					});
				} else {
					if (1 == this.dataDetail.schemeType) {
						//直购
						uni.navigateTo({
							url
						});
					} else {
						//其他

						if (url.indexOf('ask-price') > -1) {
							//询问价格不需要认证，直接跳转
							uni.navigateTo({
								url
							});
						} else {
							// #ifdef H5
							uni.navigateTo({
								url
							});
							// #endif
							// #ifndef H5
							// 验证实名
							const verifyRelaName = await this.$store.dispatch('app/verifyRelaName', {
								openid: this.openid, // openid
								redirect: url, // 跳转地址
							});
							// 已实名的话直接跳转
							if (verifyRelaName) {
								uni.navigateTo({
									url
								});
							}
							// #endif
						}


					}
				}

			},

			async goAddOrder() {
				
				console.log(this.dataDetail,'this.dataDetail')
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/select-store/select-store'+"?bizType=" + this.bizType + "&modelName=" + this.dataDetail.modelName + "&schemeType=" + this.dataDetail.schemeType +  "&seriesName=" + this.dataDetail.seriesName + "&brandName=" + this.dataDetail.brandName +
					"&schemeId=" + this.dataDetail.schemeId + "&subSchemeId=" + this.subSchemeId + "&subSchemeRentId=" + this.subSchemeRentId + "&cavanFlag=" + this.cavanFlag + "&modelId=" + this.dataDetail.modelId
				})
				// #endif
				// #ifndef H5
				if (this.isNotLogin) {
					await this.$store.dispatch('user/MmvLogin'); // 获取openid
					return;
				}
				uni.navigateTo({
					url: '/pages/select-store/select-store'+"?bizType=" + this.bizType + "&modelName=" + this.dataDetail.modelName +  "&schemeType=" + this.dataDetail.schemeType +  "&seriesName=" + this.dataDetail.seriesName + "&brandName=" + this.dataDetail.brandName +
					"&schemeId=" + this.dataDetail.schemeId + "&subSchemeId=" + this.subSchemeId + "&subSchemeRentId=" + this.subSchemeRentId + "&cavanFlag=" + this.cavanFlag + "&modelId=" + this.dataDetail.modelId
				})
				// #endif
			},
			// 询问价格
			async goAskPrice() {
				if (this.isNotLogin) {
					await this.$store.dispatch('user/MmvLogin'); // 获取openid
					return;
				}
				// 询问价格
				this.goAddOrderHandle('/pages/testDrive/ask-price');
			},

			goParam() {
				uni.navigateTo({
					url: '../../testDrive/parameter-configuration?modelId=' + this.dataDetail.modelId
				})
			},

			playvideo() {
				this.showVideo = true;
				this.videoContext.play();
			},

			close() {
				this.showVideo = false;
			},

			onShareAppMessage(res) {
				this.$store.dispatch('home/recordShare')
				return {
					// title:'车辆详情',
					// bgImgUrl:'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
					// content:this.dataDetail.brandName+this.dataDetail.seriesName+this.dataDetail.modelName,
					// desc:'微信扫一扫进入小程序查看详情分享自卡文租赁商城',
					// imageUrl:'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
					path: '/pages/car/cardetail/cardetail?bizType=' + this.bizType + '&schemeId=' + this.dataDetail.schemeId +
						'&deptId=' + '' + '&customerId=' + this.$store.state.user.userInfo.customerId
				}
			},
			onShareTimeline() {
				this.$store.dispatch('home/recordShare')
				return {
					path: '/pages/car/cardetail/cardetail?bizType=' + this.bizType + '&schemeId=' + this.dataDetail.schemeId +
						'&deptId=' + '' + '&customerId=' + this.$store.state.user.userInfo
						.customerId
				}
			},
		},
		onLoad(op) {
			console.log(op,'opopo')
			//记录开始时间
			getApp().globalData.taskStartTime = new Date().getTime();
			getApp().globalData.objType = 8;
			// if (!uni.$u.test.isEmpty(op.scene)) {
			// 	const scene = decodeURIComponent(op.scene);
			// 	let s_list = scene.split('=');
			// 	//（任务id=推广人id=推广人类型=推广方案id=方案类型1.直购，2分期购车，3租赁 4.金融分期）
			// 	getApp().globalData.taskObjId = s_list[0];
			// 	getApp().globalData.personnelId = s_list[1];
			// 	getApp().globalData.personnelType = s_list[2];
			// 	op.schemeId = s_list[3];
			// 	op.bizType = s_list[4];
			// }
			this.bizType = op.bizType;
			this.schemeId = op.schemeId;
			this.subSchemeId = op.subSchemeId
			this.subSchemeRentId = op.subSchemeRentId
			this.cavanFlag =  op.cavanFlag
			getApp().globalData.objId = this.schemeId;
			getApp().globalData.tempCustomerId = op.customerId;
			if (!uni.$u.test.isEmpty(op.customerId)) {
				this.$store.commit('user/saveCustomerId', op.customerId);
			}
			this.getData();
			this.videoContext = uni.createVideoContext('myVideo');
			if(uni.$u.test.isEmpty(this.openid)){
				//如果openid是空，可能是从扫码直接进入的，得等openid那个接口请求完了收到通知，再调操作记录接口
				uni.$on('getOpenIded', res=>{

					//访客
					this.$store.dispatch('home/recordUse', {
						recordType: 2,
					})
				})
			}else{
				//访客
				this.$store.dispatch('home/recordUse', {
					recordType: 2,
				})
			}

		},
		onUnload() {
			let nowTimes = new Date().getTime();
			let duration = Math.round((nowTimes - getApp().globalData.taskStartTime) / 1000);
			//访问
			this.$store.dispatch('home/recordUse', {
				recordType: 3,
				objRecordData: {
					durationTime: duration,
					recordTime: moment(nowTimes).format('YYYY-MM-DD HH:mm:ss')
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.info-box{	
	padding:32upx;
	margin:32upx;
	.img-box{
		width: 100%;
		height:300upx;
		image{
			width:100%;
			height:100%;
		}
	}
	.share-line{
		width: 100%;
		height: 1upx;
		border-bottom: 1upx dashed #efefef;
		margin:24upx 0
	}
	.share-text{
		display: flex;
		justify-content: flex-start;
		.text-value{
			font-size: 28upx;
			color:#173B42;
			max-width: 400upx;
			white-space: pre-wrap; /* 保留空白符，并允许文本换行 */
			word-wrap: break-word; /* 防止长单词溢出 */
			overflow-wrap: break-word; /* 同上，现代浏览器的推荐使用 */
		}
		.text-img{
			width:100upx;
			height:100upx;
			image{
				width:100%;
				height:100%;
			}
		}
	}
	
	
}
.shar-click{
		display: flex;
		justify-content: space-around;
		margin-top:40upx;
		margin-bottom: 180upx;
		button{
			font-size:24upx !important;
			background-color: #ffffff !important;
		}
		button[plain] {
		  border: 0
		}
	}
	.bottom2 {
		position:absolute;
		bottom: 30upx;
		width: 90%;
		left:5%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: $redec;
		border-radius: 8upx;
		color:#ffffff;
		font-size: 32upx;
	}
	.bottom3{
		position:absolute;
		bottom: 70upx;
	}
	.indicator {
		@include flex(row);
		justify-content: center;
		margin-bottom: 60upx;

		&__dot {
			height: 12upx;
			width: 12upx;
			border-radius: 100upx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 7upx;
			transition: background-color 0.3s;

			&--active {
				background-color: $green12;
			}
		}
	}

	.color-wrap {
		@include flex(column);
		align-items: center;
		position: absolute;
		right: 63upx;
		bottom: 35upx;

		.color-text {
			font-size: 24upx;
			color: #232323;
			margin-top: 12upx;
			text-shadow: #fff 2upx 2upx 6upx;
		}

		.color-list {
			@include flex;
			align-items: center;
			background-color: #e2e2e2;
			border-radius: 90upx;
			height: 45upx;

			.color-bg {
				width: 26upx;
				height: 26upx;
				margin: 0 9upx;
				border-radius: 100upx;
			}

			.color-active {
				width: 36upx;
				height: 36upx;
			}
		}
	}

	.base-info {
		@include flex(column);
		margin: 0px 32upx;
		border-radius: 16upx;
		.parameter{
			margin-top:32upx;
			.parameter-info{
				display: flex;
				line-height: 56upx;
				.label{
					font-size: 24upx;
					color:#666666;
				}
			}
		}
		.item-title{
			display: flex;
			justify-content: space-around;
			margin-top:32upx;
			.title-text{
				font-size: 32upx;
				color:#666666;
			}
			.title-text-selset{
				font-size: 32upx;
				color:#173B42;
				font-weight: bold;
			}
			.line{
				width: 85%;
				height:5upx;
				background:#173B42 ;
				margin: 8upx auto;
			}
		}
		&-top {
			@include flex;
			justify-content: space-between;

			&-model {
				@include flex(column);

				&-brand {
					font-size: 28upx;
					color: $black33;
					font-weight: bold;
				}

				&-series {
					font-size: 20upx;
					color: $black99;
					margin-top: 3upx;
				}
			}

			&-param {
				width: 140upx;
				height: 47upx;
				line-height: 47upx;
				text-align: center;
				color: $green12;
				font-size: 24upx;
				border-radius: 2upx;
				border: 1upx #bebebe solid;
			}
		}

		&-tags {
			display: inline-flex;
			flex-wrap: wrap;
			margin-top: 18upx;

			text {
				@include flex;
				height: 43upx;
				align-items: center;
				flex-wrap: wrap;
				margin: 10upx 10upx 0 0;
				padding: 0 14upx;
				border-radius: 6upx;
				background-color: $green12;
				font-size: 20upx;
				color: $white;
			}
		}

		&-price {
			margin-top: 18upx;
			color: $redec;
			font-size: 22upx;
			font-weight: bold;
		}
	}

	.text-box{
		margin: 32upx 32upx 0px 32upx;
		padding-top:32upx;
		background-color: #ffffff;
		.base-info-top-model-brand{
			font-size: 32upx;
			font-weight: bold;
			margin-bottom: 7px;
		}
		.base-info-top-model-series{
			font-size: 24upx;
			color:#999999 ;
			margin-bottom: 14upx;
		}
		.base-param{
			color:#173B42 ;
			border:1px solid #173B42 ;
			font-size: 24upx;
			border-radius: 4upx;
			padding: 8upx 16upx;
			height: 32upx;
			line-height: 32upx;
			text-align: center;
			min-width:100upx;
			
		}
		
	}
	.base-price{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.text-box1{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.base-info-price{
			height: 32upx;
			line-height: 32upx;
			padding: 6upx 16upx;
			background-color: rgba(255, 106, 21, 0.07);
			color:#FF6A15 ;
			font-size: 24upx;
			font-weight: normal;
		}
	}
	.base-price1{
		display: flex;
		justify-content: start;
		align-items: center;
		.base-info-price{
			height: 32upx;
			line-height: 32upx;
			padding: 6upx 16upx;
			background-color: rgba(32,330,116,0.1);
			color:#469428 ;
			font-size: 24upx;
			font-weight: normal;
		}
	}

	.tab-select {
		@include flex;
		justify-content: space-evenly;
		height: 80upx;
		font-weight: bold;
		font-size: 28upx;
		background-color: white;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;

		&-item {
			width: 0;
			flex-grow: 1;
			color: $black13;

			line-height: 80upx;
			text-align: center;
		}

		&-active {
			color: #009B01;
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
		@include flex;
		background-color: $white;

		&-share {
			line-height: 96upx;
			flex-grow: 1;
			text-align: center;
			font-size: 32upx;
			color: $black66;
			background-color: $white;
			margin: 0px;
			padding: 0px;
			/*自定义边框*/
			border: 0px;
			/*消除默认点击蓝色边框效果*/
			outline: none;
		}

		&-testdrive {
			line-height: 96upx;
			flex-grow: 1;
			text-align: center;
			font-size: 32upx;
			color: $white;
			background-color: $redec;
		}
	}
	
	.bottom-box{
		width: 100%;
		position: fixed;
		font-size: 32upx;
		color: $white;
		bottom: 10upx;
		z-index: 2;
	}
	.bottom2 {
		width: 90%;
		height: 80upx;
		margin: 0 auto;
		text-align: center;
		line-height: 80upx;
		background-color: $redec;
		border-radius: 8upx;
	}
	.bottom_btns {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    text-align: center;
	    position: fixed;
	    bottom: 0px;
		height: 130upx;
	    left: 0;
	    width: 100%;
	    z-index: 10;
	    background: #fff;
		.share-btn{
			line-height: 80upx !important;
			width:328upx !important;
			height: 80upx !important;
			border:1px solid #173B42 !important;
			border-radius: 8upx !important;
			margin-right: 32upx !important;
			margin-left: 32upx !important;
			background-color: #ffffff !important;
		}
		.sear{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			.bottom-share{
				font-size:22upx ;
				color:#173B42;
				width:60upx;
				line-height: 22upx;
			}
			.bg{
				width:40upx;
				height: 40upx;
				margin-bottom: 8upx;
			}
		}
		
	    .button {
	        line-height: 80upx;
			width:328upx;
			height: 80upx;
			border:1px solid #173B42 ;
			border-radius: 8upx;
			margin-right: 32upx;
			margin-left: 32upx;
	    }
	
	    .button:nth-child(1) {
	        background: #fff;
	        color: #666;
			margin-right:30upx ;
	    }
	
	    .button:nth-child(2) {
	        background: #173b42;
	        color: #fff;
	    }
	}
</style>
